html, body {
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: #4a4c55;
}

.outer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}

.area {
    height: 20%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}
.mid-area {height: 50%;}

.block {
    width: 30%;
    height: calc(100% - 5px);
    border: 5px solid lightgray;
    background-color: #a59f9d;
}

.top-left-block  {border-top: none; border-left: none; border-bottom-right-radius: 80px;}
.top-right-block {border-top: none; border-right: none; border-bottom-left-radius: 80px;}
.bottom-left-block  {border-bottom: none; border-left: none; border-top-right-radius: 80px;}
.bottom-right-block {border-bottom: none; border-right: none; border-top-left-radius: 80px;}

.S-dir {flex-direction: row; align-items: flex-start;}
.W-dir {flex-direction: column; align-items: flex-end;}
.N-dir {flex-direction: row-reverse; align-items: flex-end;}
.E-dir {flex-direction: column-reverse; align-items: flex-start;}

.signal {
    width: 30%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    /* align-items: flex-start; */
}

.light-box {
    display: flex;
    flex-wrap: nowrap;
    background-color: #282828;
    border: 3px solid #282828;
}

.light {
    width: 40px;
    height: 40px;
    margin: 5px;
    border-radius: 50%;
}

.green-light {background-color: #00c000;}
.yellow-light {background-color: #d0d000;}
.red-light {background-color: #d80000;}

.timer {
    background-color: #282828;
    color: #d8d8d8;
    border: 3px solid #282828;
    width: 50px;
    height: 50px;
    font: bold 45px "Agency FB";
    text-align: center;
}